<template>
 <el-container>
   <el-header>
     <div class="admin">
       <span>修改密码</span>
       <span>退出</span>
     </div>
   </el-header>
   <el-container>
     <el-aside
       width="200px">
       <el-menu
         :default-active="$router.path"
         class="el-menu-vertical-demo"
         background-color="#233646"
         text-color="#fff"
         router
         active-text-color="#5193ff">
         <el-menu-item index="/">
           <i><img src="http://yx.youzainet.com/qixiu/images/%E9%A6%96%E9%A1%B5_1/u994.png" alt=""></i>
           <span>芸商汇管理后台</span>
         </el-menu-item>
         <el-menu-item index="/">
           <i class="iconfont icon-shouye"></i>
           <span>主页</span>
         </el-menu-item>
         <el-menu-item index="/guanli">
           <i class="iconfont icon-wenjianjia"></i>
           <span>商家管理</span>
         </el-menu-item>
         <el-menu-item index="/moneySet">
           <i class="iconfont icon-caiwu"></i>
           <span>财务管理</span>
         </el-menu-item>

         <el-submenu index="/changeMoney" class="set">
           <template slot="title">
             <i class="iconfont icon-shezhi"></i>
             <span>设置</span>
           </template>
           <el-menu-item index="/changeMoney">费用设置</el-menu-item>
           <el-menu-item index="/xieyiSet">协议设置</el-menu-item>
           <el-menu-item index="/phoneSet">客服电话</el-menu-item>
           <el-menu-item index="/changePwd">修改密码</el-menu-item>

         </el-submenu>
       </el-menu>
     </el-aside>
     <el-main>
       <keep-alive  v-if="this.$route.meta.keepAlive">
       <router-view></router-view>
       </keep-alive>
     </el-main>
   </el-container>

 </el-container>
</template>

<script>
    export default {
      data(){
        return{

        }
      },
      methods:{

      },
      created(){

      }
    }
</script>

<style scoped lang="scss">
.el-container{
  min-height: 1080px;
  .el-header{
    width: 100%;
    background: #fff;
    text-align: right;
    border-bottom: 1px solid #ccc;
    box-shadow: 2px 2px 2px #ccc;

    span{
      line-height: 60px;
      padding-right: 40px;
      font-size: 20px;
      cursor: pointer;
      &:hover{
        color: #5193ff;
        transition: 0.5s;
      }
    }
  }
  .el-aside{
    height: auto;
    background: #233646;
    .el-menu-item{
      width: 100%;
      text-align: left;
      font-size: 20px;
      i{
        font-size: 20px;
        padding-right: 10px;
      }
      &:nth-child(1){
        padding-top: 40px;
        height: auto!important;
        display: flex;
        flex-direction: column;
        text-align: center;
      }
    }
    .set{
      .el-menu-item{
        width: 100%;
        text-align: left;
        font-size: 20px;
        i{
          font-size: 20px;
          padding-right: 10px;
        }
        &:nth-child(1){
          padding-top: 0;
          height: auto!important;
        }
      }
    }
  }
  .el-main{
    display: flex;

  }
}
</style>
